<template>
  <div class="uiconWrap">
    <div class="uadvwrap">
      技术优势
    </div>
    <div class="uicon-wrap">
      <div class="uiconbox" v-for="item of advList" :key="item.iconId">
        <div :class="setClass(item.iconId)">
          <div class="newCenter_technologyContbox">
            <div class="newCenter_technologybgImg" :style="item.iconImgPosition"></div>
            <div class="newCenter_technologyContbox1">
                {{item.title}}
            </div>
            <div class="newCenter_technologyContbox2">
                <div v-for="(items, index) in item.des" :key="index">{{items.desC}}</div>
            </div>
          </div>
          <div class="newCenter_technologyTip_wrap">
            <div class="newCenter_technologyTip_box"  v-for="(itemes, index) in item.desUp" :key="index">
                <div class="newCenter_technologyTip-samall">{{itemes.sgin}}</div>
                <div class="newCenter_technologyTip-word">{{itemes.desUpC}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UindexAdv',
  data () {
    return {
      advList: [
        {
          iconId: 1,
          title: '分布式加密',
          iconImgPosition: 'background-position-x: 0;background-position-y: 0;',
          des: [
            {
              desC: '全球可信高强度安全加密技术'
            }, {
              desC: 'MD5码不可篡改技术'
            }, {
              desC: '异地分布式存储'
            }, {
              desC: '入驻政府服务器'
            }
          ],
          desUp: [
            {
              sgin: '◆',
              desUpC: 'CFCA全球信任SSL证书'
            }, {
              sgin: '◆',
              desUpC: 'MD5技术读取所有存储文件，确保文件唯一性与不可篡改性'
            }, {
              sgin: '◆',
              desUpC: '数据异地分储'
            }, {
              sgin: '◆',
              desUpC: '时间与国家授时中心时间同步，锁定作品上传时间精准到秒'
            }
          ]
        },
        {
          iconId: 2,
          title: '双重防伪技术',
          iconImgPosition: 'background-position-x: -50px;background-position-y: 0;',
          des: [
            {
              desC: '双重加密溯源'
            }, {
              desC: '一物一码物联网技术'
            }, {
              desC: '多项专利防伪码技术'
            }
          ],
          desUp: [
            {
              sgin: '◆',
              desUpC: '加密序列化技术，允许消费者使用手机扫描产品包装上的二维码，即可验证其真实性'
            }, {
              sgin: '◆',
              desUpC: '采用生物纤维等多种专利防伪技术'
            }
          ]
        },
        {
          iconId: 3,
          title: '智能大数据',
          iconImgPosition: 'background-position-x: -100px;background-position-y: 0;',
          des: [
            {
              desC: 'AI智能数据管理技术'
            }, {
              desC: '大数据算法'
            }, {
              desC: '深度学习技术'
            }
          ],
          desUp: [
            {
              sgin: '◆',
              desUpC: '大数据智能管理技术'
            }, {
              sgin: '◆',
              desUpC: '后台算法深度学习生成智能技术报告'
            }
          ]
        }
      ]
    }
  },
  methods: {
    setClass (key) {
      let obj = {newCenter_technologyAbox: true}
      obj[`bgUrl${key}`] = true
      return obj
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.uadvwrap
  padding-top 34px
  line-height 86px
  font-size 28px
  color #333
  text-align center
.uiconWrap
  padding 0 10px
.uicon-wrap
  display flex
  flex-direction row
  align-items center
  flex-wrap wrap
.uiconbox
  width 33.333%
  padding 0 10px
  box-sizing border-box
.newCenter_technologyAbox
  width 100%
  display block
  position relative
  height 300px
  cursor default
  overflow hidden
.bgUrl1
  background #fff url('~img/ymtIndex_contImg_06.png') no-repeat
  background-size cover
  background-position center center
.bgUrl2
  background #fff url('~img/ymtIndex_contImg_08.png') no-repeat
  background-size cover
  background-position center center
.bgUrl3
  background #fff url('~img/ymtIndex_contImg_10.png') no-repeat
  background-size cover
  background-position center center
.newCenter_technologyContbox
  position absolute
  top 0
  left 50%
  width 70%
  margin-left -35%
  height 100%
  padding-top 33px
.newCenter_technologybgImg
  width 45px
  height 45.5px
  display block
  margin 0 auto 21px
  background-image url('~img/ymt-userIndex_bg.png')
  background-repeat no-repeat
  background-size 182.5px 173px
  overflow hidden
.newCenter_technologyContbox1
  line-height 40px
  font-size 24px
  color #fff
  text-align center
  margin-bottom 38px
.newCenter_technologyContbox2
  color #fff
  text-align center
  display block
  line-height 24px
  font-size 14px
.newCenter_technologyTip_wrap
  height 50%
  width 100%
  padding-top 7%
  padding-left 7.478%
  background-color rgba(0, 0, 0, 0.5)
  position absolute
  bottom -50%
  left 0
  z-index 2
  transition bottom .3s
.newCenter_technologyTip_box
  line-height 20px
  font-size 12px
  color #fff
  overflow hidden
.newCenter_technologyTip-samall
  line-height 20px
  font-size 12px
  width 15px
  color #fff
  float left
.newCenter_technologyTip-word
  line-height 20px
  font-size 12px
  color #fff
  float left
  width 83%
.newCenter_technologyAbox:hover
  .newCenter_technologyContbox2
    display none
.newCenter_technologyAbox:hover
  .newCenter_technologyTip_wrap
    bottom 0
</style>
